<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>修改调研试题</title>
	<script charset="utf-8" src='<c:url value="/js/jquery.min.js"></c:url>'></script>
	<script src='<c:url value="/js/boot.js"></c:url>'></script>
	<script src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>
<style>
		html,body{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
		}
		li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.Basic_course_content{
			width: 1920px;
			width: 100%;
		}
		.Basic_course_content_content{
			width: 1280px;
			margin: 0 auto;
		}
		.Basic_course_content_content_content{
			width: 780px;
 		    margin-left: 104px;
    		margin-top: 24px;
			text-align: left;
		}
		.Basic_course_content_content_content_title{
			color: #2459aa;
			font-size: 18px;
			padding-bottom: 5px;
			border-bottom: 2px solid #2459aa;
			/*font-weight: 600;*/
		}
		.Basic_course_content_content_content_content{
			/*padding: 25px 0;   */
			/* 25 0*/
		}
		.Basic_course_content_content_content_content>ul>li{
			padding: 16px 0;
		}
		.Basic_course_content_content_content_content>ul{
			margin: 0;
			padding: 0;
			margin-bottom: 16px;
		}
		.Basic_course_content_content_content_content>ul>li>div>span{
			float: left;
			font-size: 16px;
			padding: 4px 0;
		}
		.Basic_course_content_content_content_content>ul>li>div>span>font{
			color: #ff0000;
		}
		.Basic_course_content_content_content_content>ul>li>div input[type="text"]{
			/*width: 423px;*/
			padding: 5px 0;
			padding-left: 5px;
		}
		.Basic_course_content_content_content_content>ul>li>div>select{
			padding: 5px 0;
			padding-left: 5px;
		}
		.Basic_course_content_content_content_content>ul>li>div>textarea{
			width: 420px;
			padding: 5px;
    		margin-top: 5px;
		}
		.Basic_course_content_content_content_content>ul>li>div>select>option{
			padding: 3px;
		}
		.Basic_course_baocun{
			background: #2459aa;
			color: #fff;
			font-size: 16px;
			padding: 5px 15px;
			border-radius: 3px;
			margin-right: 92px;
		}
		/**/
		.New_course_type ul{
			margin:0;
			padding:0;
		}
		.New_course_type li{
			display: inline-block;
		    padding: 4px 14px 6px 14px;
 		    /*border: 1px solid;*/
 		    color: #2459aa;
 		    cursor: pointer;
		}
		.New_course_type li:hover{
			background: #2459aa;
			color: white;
			border-radius: 0px 0px 6px 6px;
		}
		.current_page{
			background: #2459aa;
			color: white !important;
			border-radius: 0px 0px 6px 6px;
		}
		.leftmargin{
			margin-left: 93px;
			/*border:1px solid black;*/
		}
		.bottommargin{
			margin-bottom: 13px;
			width: 401px !important;
		}
		#one_choice_form1{
			width:432px;
		}
		.fixedWidth{
			width: 22px; /* 432-401-5*2*/
		}
		.inlineDisplay{
			display: inline-block;	
		}
		#addTag{
			font-size: 31px;
			font-weight: 900;
			line-height: 29px;
			cursor: pointer;
			color:#b2b2b2;
		}
		#addTag:hover{
			color: #275bac;
		}	
		.showTag{
			height: 24px;
		    background: #e5e5e5;
		    font-size: 12px;
		    float: left;
		    line-height: 24px;
		    margin-right: 7px;
		    padding: 0px 9px;
		    margin-top: 4px;
		}	
		.taggg{
			width: 450px;
			float: left;
		}





		/*弹框*/
		.edit_tag{
		    width: 650px;
		    position: absolute;
			top: -200px;
		    left: calc(50% - 325px);
		    background: #fff;
		    box-shadow: 0 0 3px #ccc;
		    border-radius: 3px;
		    position: relative;
    		overflow: hidden;
		}
		.edit_tag_header{
			width: 650px;
			height: 31px;
			background: #2b5eae;
			border-top-left-radius: 3px;
		}
		.sava_tags,.edit_tag_header>span{
		    font-size: 14px;
		    color: #fff;
		    line-height: 30px;
		    margin-left: 8px;
		}
		.cancel{
			width: 44px;
		    height: 31px;
		    float: right;
		    cursor: pointer;
		    border-top-right-radius: 3px;
		}
		.cancel img{
			height: 31px;
			 border-top-right-radius: 3px;
		}
		.edit_tag_content>span{
			line-height: 80px;
			font-size:16px;
			color:#2b5eae;
		}
		.sava_tags{
			text-align: center;
		    width: 80px;
		    height: 30px;
		    border-radius: 5px;
		    background: #2b5eae;
		    position: relative;
		    cursor: pointer;
		    margin-left: 84.5%;
		    margin: 54px 0 23px 551px;
		}
		.tag_box{
		    width: 603px;
		    position: relative;
		    border: 1px solid #bbb;
		    border-radius: 2px;
		    line-height: 40px;
		    font-size: 14px;
		    padding-left: 7px;
		    overflow: hidden;
		    margin: 0 auto;
		    top: 25px;
		}
		#tag_input{
		    font-size: 14px;
		    padding-left: 7px;
		    position: relative;
		    left: 0;
		    width: 98%;
		    border: 0;
		    outline: none;
		    height: 24px;
		}

		.each_tag_style{
		    height: 30px;
		    background: #e5e5e5;
		    position: relative;
		    float: left;
		    line-height: 35px;
		    top: 5px;
		    margin-right: 7px;
		    padding: 0px 5px;
		    white-space: nowrap;
		    padding-right: 9px;
        	margin-bottom: 7px;
		}

		.cancel_tag{
		    font-size: 5px;
		    position: absolute;
		    top: -11px;
		    right: 1px;
		    color: #969696;
		    cursor: pointer;
		}
		.tag_box span a:v isited {
		    color: #666699;
		    text-decoration: none;
		}

		.tag_box span a:link {
		    color: #37a;
		    text-decoration: none;
		}
		.tips{
		    font-size: 14px;
		    color: red;
		    position: relative;
		    left: 50px;
		    margin-top: 35px;
		}
		/* 弹框 */
	</style>
</head>
<body>
	<div class="Basic_course_content">
		<div class="Basic_course_content_content">
			<div class="Basic_course_content_content_content">
				<div class="Basic_course_content_content_content_title">
					新建调研试题
				</div>

				<div class="New_course_type">
					<ul>
						<li id="one_choice_type" class="current_page">单选题</li>
						<li id="multiple_choice_type">多选题</li>
						<li id="true_or_false_type">判断题</li>
						<li id="solution_type">问答题</li>
					</ul>
				</div>
				<!-- 题干 -->
				<div class="Basic_course_content_content_content_content">
					<ul>
						<li>
							<div>
								<span><font>*</font> 题干：</span>
								<input type="text" style="margin-left:33px;width:423px;" id = "stem">
							</div>
						</li>
					</ul>
				</div>

				<!-- 单选题页面 -->
				<div class="Basic_course_content_content_content_content" id="one_choice_content">
					<ul>
						<li>
							<div>
								<span><font>*</font> 选项：</span>
								<div class="leftmargin">
									<form id="one_choice_form1">
								    </form>
								    <a style="font-size:13px;cursor:pointer;" id="one_choice_add_options1">+ 增加选项</a>&nbsp;&nbsp;&nbsp;
								    <a style="font-size:13px;cursor:pointer;" id="one_choice_del_options1">- 减少选项</a>
							    </div>
							</div>
						</li>
					</ul>
				</div>
				


				<!-- 多选题页面 -->
				<div class="Basic_course_content_content_content_content" id="multiple_choice_content" style="display:none;">
					<ul>
						<li>
							<div>
								<span><font>*</font> 选项：</span>
								<div class="leftmargin">
									<form id="multiple_choice_form1"> 
								    </form>
								    <a id="multiple_choice_add_options1" style="font-size:13px;cursor:pointer;">+ 增加选项</a>&nbsp;&nbsp;&nbsp;
								    <a style="font-size:13px;cursor:pointer;" id="multiple_choice_del_options1">- 减少选项</a>
							    </div>
							</div>
						</li>
					</ul>

				</div>


				<!-- 判断题页面 -->
				<div class="Basic_course_content_content_content_content" id="true_or_false_content" style="display:none;">
					<ul>
						<li>
							<div>
								<span><font>*</font> 选项：</span>
								<div class="leftmargin">
									<p>是</p>
									<p>否</p>
							    </div>
							</div>
						</li>
					</ul>
				</div>


				<!-- 解答题页面只有题干-->
				<div class="Basic_course_content_content_content_content">
					<ul>
						<li>
							<div class="Basic_course_modify">
								<span><font>*</font> 题目标签：</span>
								<div class="taggg">
									
								</div>
								<div id="addTag" class="inlineDisplay">+</div>
							</div>
						</li>
					</ul>
				</div>

				<!-- 保存和预览 -->
				<div class="Basic_course_content_content_content_content" style="clear: both;margin-left: 92px;">
					<ul>
						<li>
							<div>
								<a href="javascript:save();" class="Basic_course_baocun">保存</a>
								<a href="javascript:preview();" class="Basic_course_baocun">预览</a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 弹框  -->
	<div class="edit_tag" style="display:none;">
		<div class="edit_tag_header">
			<span>编辑标签</span>
			<div class="cancel">
				<img src='<c:url value="/share/images/cancel.jpg"></c:url>' alt="" />
			</div>
		</div>
		<div class="edit_tag_content">
			<div class="tag_box" >
				<input type="text"  id="tag_input" style="z-index:999;"placeholder="添加标签，多个标签用空格分隔，帮助你更好的整理内容">
			</div>
			<div class="tips" style="display:none;" id="toolong">* 超过长度限制</div>
			<div class="tips" style="display:none;" id="repeat">* 重复的标签</div>
			<div class="sava_tags">
				<span>保存</span>
			</div>
		</div>
	</div>
</body>
<script>
	var question_type = "单选题";
	///单选题状态
	function state1(){
		question_type = "单选题";
		$("#one_choice_content").show();
		$("#multiple_choice_content").hide();
		$("#true_or_false_content").hide();
		$("#solution_content").hide();
		$("#one_choice_type").addClass("current_page");
		$("#multiple_choice_type").removeClass("current_page");
		$("#true_or_false_type").removeClass("current_page");
		$("#solution_type").removeClass("current_page");
	}
	///多选题状态
	function state2(){
		question_type = "多选题";
		$("#one_choice_content").hide();
		$("#multiple_choice_content").show();
		$("#true_or_false_content").hide();
		$("#solution_content").hide();
		$("#multiple_choice_type").addClass("current_page");
		$("#one_choice_type").removeClass("current_page");
		$("#true_or_false_type").removeClass("current_page");
		$("#solution_type").removeClass("current_page");
	}
	//判断题状态
	function state3(){
		question_type = "判断题";
		$("#one_choice_content").hide();
		$("#multiple_choice_content").hide();
		$("#true_or_false_content").show();
		$("#solution_content").hide();
		$("#true_or_false_type").addClass("current_page");
		$("#one_choice_type").removeClass("current_page");
		$("#multiple_choice_type").removeClass("current_page");
		$("#solution_type").removeClass("current_page");
	}
	//解答题状态
	function state4(){
		question_type = "问答题";
		$("#one_choice_content").hide();
		$("#multiple_choice_content").hide();
		$("#true_or_false_content").hide();
		$("#solution_content").show();
		$("#solution_type").addClass("current_page");
		$("#one_choice_type").removeClass("current_page");
		$("#true_or_false_type").removeClass("current_page");
		$("#multiple_choice_type").removeClass("current_page");
	}
	function add_one(value){
		var oTest = document.getElementById("one_choice_form1");
		var newNode = document.createElement("div");
		var newNode2 = document.createElement("span");
		var newNode3 = document.createElement("input");
		oTest.appendChild(newNode);
		newNode.appendChild(newNode2);
		newNode.appendChild(newNode3);

		newNode2.innerHTML = options_name("one_choice_form1");
		newNode2.style.display = "inline-block";
		newNode2.style.width = "22px";
		newNode3.style.width = "406px";
		newNode3.style.padding = "5px 0px";
		newNode3.style.marginBottom = "13px";
		newNode3.value = value;
		newNode3.id = options_name("one_choice_form1");
	}
	
		// 增加选项 -- 单选选项
		$("#one_choice_add_options1").click(function(){
			add_one("");
		});
		function add_many(value){
			var oTest = document.getElementById("multiple_choice_form1");
			var newNode = document.createElement("div");
			var newNode2 = document.createElement("span");
			var newNode3 = document.createElement("input");
			oTest.appendChild(newNode);
			newNode.appendChild(newNode2);
			newNode.appendChild(newNode3);

			newNode2.innerHTML = options_name("multiple_choice_form1");
			newNode2.style.display = "inline-block";
			newNode2.style.width = "22px";
			newNode3.style.width = "406px";
			newNode3.style.padding = "5px 0px";
			newNode3.style.marginBottom = "13px";
			newNode3.value = value;
			newNode3.id = "M"+options_name("multiple_choice_form1");
		}
		// 增加选项 -- 多选选项
		$("#multiple_choice_add_options1").click(function(){
			add_many("");
		});
	
		function options_name(a) {
			var hei = document.getElementById(a);
			var v1=$(hei).children().length - 1;
			var v2=String.fromCharCode(v1 + 65);
			return v2;
		}
	
	
		//删除选项
		function deleteOptions(a) {
			var v1=document.getElementById(a);
			v1.removeChild(v1.lastChild);
		}
	
		//减少选项
		$("#one_choice_del_options1").click(function(){
			deleteOptions("one_choice_form1");
		});
	
		$("#multiple_choice_del_options1").click(function(){
			deleteOptions("multiple_choice_form1");
		});
	
		// 计算字符长度，区分中英文
		String.prototype.gblen = function() {  
			var len = 0;  
			for (var i=0; i<this.length; i++) {  
			    if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) {  
			    	len += 2;  
			    } else {  
			        len ++;  
			    }  
			}  
			return len;  
		}
		var arr = [];
		// 增加标签
		$("#tag_input")[0].onkeydown = function(e){ 
			var text = $.trim($("#tag_input").val());//获取输入的text
			var textlen = text.gblen();//获取text的长度
			if(e.keyCode == 32 && text!=""){ //按下空格后
				var n = arr.indexOf(text);//判断是否重复
				if (textlen > 20) {//长度限定20以内
					$("#toolong").show();//提示
					$(".sava_tags").css("margin-top","0px");
				}
				else if(n != -1){ //重复了
					$("#repeat").show();
					$(".sava_tags").css("margin-top","0px");
				}
				else{ //既不重复长度也在20以内
					$("#toolong").hide(); //隐藏提示
					$("#repeat").hide();
					$(".sava_tags").css("margin-top","54px");
	 				var ele1 = document.createElement("span");//创建标签
					var ele2 = document.createElement("a");//删除标签按钮
					ele1.className += "each_tag_style";
					ele2.className += "cancel_tag";
					ele1.innerHTML = text;
					ele2.innerHTML = "X";
					$("#tag_input").val(""); //清空input框
					$("#tag_input").before(ele1);
					ele1.appendChild(ele2);
					ele2.onclick = function(){ //删除每一个小标签
						$(this).parent("span").remove();
						if($(".tag_box").children("span").length == 0){//没有标签时显示placeholder
							$("#tag_input").val("");
							$("#tag_input")[0].style.width = "98%";
						}
					};
					$("#tag_input")[0].style.width = $(".tag_box")[0].offsetWidth -  ele1.offsetLeft - ele1.offsetWidth - 7 - 6 - 9 + "px";//计算input框的长度
					if($(".tag_box").children("span").length != 0){//有标签时不显示placeholder
						$("#tag_input").val("");
						$("#tag_input").attr("placeholder","");
					}
					arr.push(text); //把这次的text添加进数组
				}
			}
		}
		// 关闭增加标签
		$(".cancel").click(function(){
			$(".edit_tag").hide();
		});

		// 打开增加标签
		$("#addTag").click(function(){
			$(".edit_tag").show();
		});

		//保存标签
		$(".sava_tags").click(function(){
			$(".Basic_course_modify .taggg").html("");//清空
			[].forEach.call($(".tag_box").children("span"),function(e,i){  //e是每个元素 i是序号
				$a =$(e).clone(true);
				$a[0].className = "showTag";
				$(".taggg").append($a);
			});
			$(".edit_tag").hide();
		});


</script>
	<script type="text/javascript">
	/* /////////////////////////操作\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
	mini.parse();
	mini_debugger = false;
	var rootPath = '${rootPath}';
	var question_type = '${type}';
	var testId = '${testId}';
	$(function(){
		getMap();
	});
	
	if(question_type == "单选题"){
		state1();
		$("#one_choice_type").show();
		$("#multiple_choice_type").hide();
		$("#true_or_false_type").hide();
		$("#solution_type").hide();
	}else if(question_type == "多选题"){
		state2();
		$("#one_choice_type").hide();
		$("#multiple_choice_type").show();
		$("#true_or_false_type").hide();
		$("#solution_type").hide();
	}else if (question_type == "判断题") {
		state3();
		$("#one_choice_type").hide();
		$("#multiple_choice_type").hide();
		$("#true_or_false_type").show();
		$("#solution_type").hide();
	}else if (question_type == "问答题") {
		state4();
		$("#one_choice_type").hide();
		$("#multiple_choice_type").hide();
		$("#true_or_false_type").hide();
		$("#solution_type").show();
	}
	
	//获取form表单下input框中的值
	function getFormValue(formId) {
		var _form = document.getElementById(formId); //获取该表单下的所有input标签		
		var _inputs = _form.getElementsByTagName("input"); //定义一个收集input标签的name和值 			
		var result = null; //循环这个input数组取值  并将获取name和值拼接成对象赋值给d的对象的第I位		
		for (var i = 0; i < _inputs.length; i++) {
			if (_inputs[i].value != "" && _inputs[i].value != null &&_inputs[i].value.length) {
				var str = _inputs[i].value.replace(/\s+/g,"")
				if(!str){
					return result;
				}
				if (i == 0) {
					result = _inputs[i].value;
				} else {
					result += ",nwebadjj,_" + _inputs[i].value;
				}
			}
		}
		return result;
	}
	//将form中的input全部赋空
	function setFormEmpty(formId) {
		var _form = document.getElementById(formId); //获取该表单下的所有input标签		
		var _inputs = _form.getElementsByTagName("input"); //定义一个收集input标签的name和值 			
		for (var i = 0; i < _inputs.length; i++) {
			_inputs[i].value = null;
		}
	}
	
	function save(){
		var url = rootPath + '/surveyTest/update/' + testId;
		var question = $("#stem").val();
		if(!question){
			top.commonTools.showTip("请填写题干!", 2);
			return;
		}
		var selects;
		if(question_type == "单选题"){
			selects = getFormValue("one_choice_form1");//题目选项
			if(!selects){
				top.commonTools.showTip("请填写选项!", 2);
				return;
			}
		}else if(question_type == "多选题"){
			selects = getFormValue("multiple_choice_form1");//题目选项
			if(!selects){
				top.commonTools.showTip("请填写选项!", 2);
				return;
			}
		}
		var label = $(".taggg").children().text();
		if(!label){
			top.commonTools.showTip("需要至少一个标签!", 2);
			return;
		}
		mini.alert(label);
		var map = new Object;
		map.selects = selects;
		map.label = label;
		map.class_id = question_type;
		map.question = question;
	    var jsonData = JSON.stringify(map);
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{'data':jsonData},
			success:function(data){
				if(data){
					top.commonTools.showTip("修改调研试题成功!", 1);
					if(parent.status1){
						 parent.status1();
					}
					if(parent.reloadList){
						 parent.reloadList();
					}
				}else{
					top.commonTools.showTip("修改失败!", 2);
				}
			},
			error:function(){
				top.commonTools.showTip("失败!", 2);
			}
		});
	}
	function getMap(){
		var url = rootPath + "/surveyTest/testInfo/" + testId;
		$.ajax({
			url:url,
			method:"post",
			dataType:"json",
			data:{},
			success:function(data){
				if(data){
					$("#stem").val(data.question);
					var name = data.label.split("X");//标签数组 ////从数据库得到标签数据
					for(var i = 0;i<name.length-1;i++){
						//题目标签处 写入数据    按照新建标签对话框里的样式 ：<span.showTag> 标签内容  </span>  span:elem1 
						var elem1 = document.createElement("span");  
						elem1.innerText = name[i];
						elem1.className = "showTag";
						$(".taggg").append(elem1);
						//编辑标签对话框 写入数据 <span.each_tag_style> 标签内容 <a.cancel_tag>X</a> </span> span：elem2:clone（elem1）; a：elem3
						var elem2 = elem1.cloneNode(true);
						var elem3 = document.createElement("a");//删除标签按钮
						elem3.className = "cancel_tag";
						elem3.innerHTML = "X";
						elem2.className = "each_tag_style";
						elem2.appendChild(elem3);
						$("#tag_input").before(elem2);
						//编辑标签对话框 删除标签按钮 事件
						elem3.onclick = function(){ //删除每一个小标签
							$(this).parent("span").remove();
							if($(".tag_box").children("span").length == 0){//没有标签时显示placeholder
								$("#tag_input").val(""); //清空input框
								$("#tag_input")[0].style.width = "98%"; //input框宽度初始化
							}
						}
					}
					///编辑标签对话框 input框宽度
					$("#addTag").click(function(){
						$("#tag_input")[0].style.width = $(".tag_box")[0].offsetWidth -  $(".tag_box").children("span:last")[0].offsetLeft - $(".tag_box").children("span:last")[0].offsetWidth - 7 - 6 - 9 + "px";//计算input框的长度
						$("#tag_input").val("");
						if($(".tag_box").children.lenth != 0){
						$("#tag_input").attr("placeholder",""); 
						}
					});
					transSelects(data.selects);
				}else{
					top.commonTools.showTip("获取信息失败!", 2);
				}
			},
			error:function(){
				top.commonTools.showTip("失败!", 2);
			}
		});
	}
	
	function transSelects(str){
		var arr = [];
		if(str){
			arr = str.split(",nwebadjj,_");
			for(var i = 0;i<arr.length;i++){
				if(question_type == "单选题"){
					add_one(arr[i]);
				}else if (question_type == "多选题") {
					add_many(arr[i]);
				}
			}
				
		}
	}
</script>
</html>